<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="mastermind.css" />
<title>Mastermind</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="fonctions.js"></script>


</head>
<body>
<div id="global">
	<div id="entete"><img src="images/baniere.png"/></div>
		<div id="navigation">
		<a href="index.html"><img src="images/home.png" onmouseover="this.src='images/homeMouseOver.png';" onmouseout="this.src='images/home.png';" /></a>
		<a href="credit.html"><img src="images/credit.png" onmouseover="this.src='images/creditMouseOver.png';" onmouseout="this.src='images/credit.png';" /></a>
		<a href="jeu.html"><img src="images/jouer.png" onmouseover="this.src='images/jouerMouseOver.png';" onmouseout="this.src='images/jouer.png';" /></a></div>
	<div id="contenu">
	
	<div id="imgPrincipal">
		<div id="plateau">
			<script type="text/javascript">
				//variable qui contiendra le code des lignes finies :
				var codeLignesFinies = "";
				//variable qui va contenir le nombre de pions deja places par le joueur :
				var pionsPlaces = 0;
				//variable qui va contenir le numero de la ligne courrante :
				var ligneCourante = 1;
				//variable qui va contenir le code html du plateau de jeu :
				var htmlMastermind = '<table id="mastermind">';
				//variable compteur :
				var i;
				//on cree le tableau du mastermind :
				for (i=12; i>1; i--) {
					htmlMastermind += ('<tr id='+i+'>'
						+'<td id="'+i+'a"><img src="images/boardunitoff.gif"/></td>'
						+'<td id="'+i+'b"><img src="images/boardunitoff.gif"/></td>'
						+'<td id="'+i+'c"><img src="images/boardunitoff.gif"/></td>'
						+'<td id="'+i+'d"><img src="images/boardunitoff.gif"/></td>'
						+'<td id="'+i+'e"><img src="images/r0_0.gif"/></td>'
						+'</tr>');
				}
				
				//variable qui va contenir le code de la ligne courante :
				var codeLigneCourante = ('<tr id='+ligneCourante+'>'
					+'<td id="'+ligneCourante+'a"><img src="images/boardunit.gif"/></td>'
					+'<td id="'+ligneCourante+'b"><img src="images/boardunit.gif"/></td>'
					+'<td id="'+ligneCourante+'c"><img src="images/boardunit.gif"/></td>'
					+'<td id="'+ligneCourante+'d"><img src="images/boardunit.gif"/></td>'
					+'<td id="'+ligneCourante+'e"><img src="images/r0_0.gif"/></td>'
					+'</tr>'
					+'</table>');
				
				//on ajoute la ligne courante au tableau :
				htmlMastermind += codeLigneCourante;
				
				//on met le tableau dans le div "plateau" :
				$("#plateau").html(htmlMastermind);
				
				//on rend les cases de la ligne courante droppables :
				$("#1a").droppable({
					drop: function(event, ui) {
					// je peux recuperer l'id du dragable et l'id du droppable
						surDrop(ui.draggable.attr("id"),this.id,this.parentNode.id);
					}
				});
					
				$("#1b").droppable({
					drop: function(event, ui) {
					// je peux recuperer l'id du dragable et l'id du droppable
						surDrop(ui.draggable.attr("id"),this.id,this.parentNode.id);
					}
				});
					
				$("#1c").droppable({
					drop: function(event, ui) {
					// je peux recuperer l'id du dragable et l'id du droppable
						surDrop(ui.draggable.attr("id"),this.id,this.parentNode.id);
					}
				});
					
				$("#1d").droppable({
					drop: function(event, ui) {
					// je peux recuperer l'id du dragable et l'id du droppable
						surDrop(ui.draggable.attr("id"),this.id,this.parentNode.id);
					}
				});
			</script>
		</div>
		<div id="pions">
			<img id="vert" src="images/pick_green.gif"/>
			<img id="blue" src="images/pick_blue.gif"/>
			<img id="orange" src="images/pick_orange.gif"/>
			<img id="white" src="images/pick_white.gif"/>
			<img id="red" src="images/pick_red.gif"/>
			<img id="yellow" src="images/pick_yellow.gif"/>
			<img id="purple" src="images/pick_purple.gif"/>
			<img id="fushia" src="images/pick_fushia.gif"/>
			<script type="text/javascript">
			//on indique au serveru qu'on commence la partie
				commencerJeu();
				//on rend les pions draggables :
				$("#red").draggable({revert:true});
				$("#red").draggable('invalid', 'revert', true);
				$("#blue").draggable({revert:true});
				$("#blue").draggable('invalid', 'revert', true);
				$("#vert").draggable({revert:true});
				$("#vert").draggable('invalid', 'revert', true);
				$("#orange").draggable({revert:true});
				$("#orange").draggable('invalid', 'revert', true);
				$("#white").draggable({revert:true});
				$("#white").draggable('invalid', 'revert', true);
				$("#yellow").draggable({revert:true});
				$("#yellow").draggable('invalid', 'revert', true);
				$("#purple").draggable({revert:true});
				$("#purple").draggable('invalid', 'revert', true);
				$("#fushia").draggable({revert:true});
				$("#fushia").draggable('invalid', 'revert', true);
			</script>
			<br/>
			<input type="submit" value="soumettre" />
		</div>
	<div id="resultat">
	</div>
	</div>
</div>	
</body>
</html>
